<template>
	<view class="edit" :style="{height:wh + 'px'}">
		<view class="info-list common">
			<view class="info-item border">
				<view class="item-left">我的头像</view>
				<view class="item-right">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<img class="userimg" :src="UserInfo.avatar" alt="">
					</button>
					<u-icon name="arrow-right" color="#CBCBCB" />
				</view>
			</view>
			<view class="info-item border">
				<view class="item-left">昵称</view>
				<view class="item-right">
					<input type="nickname" class="weui-input" v-model="UserInfo.username" maxlength="10"
						@input="changeinput" @blur="blurinput" />
					<u-icon name="arrow-right" color="#CBCBCB" />
				</view>
			</view>
			<view class="info-item border">
				<view class="item-left">手机号</view>
				<view class="item-right">
					<input type="text" class="weui-input" v-model="UserInfo.mobile" maxlength="11">
					<u-icon name="arrow-right" color="#CBCBCB" />
				</view>
			</view>
			<view class="info-item border">
				<view class="item-left">绑定微信账号</view>
				<view class="item-right">
					<view class="weui-input" v-if="UserInfo.openid" @click="getRemove">解除绑定</view>
					<button v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						class="opbtn">点击绑定</button>
					<u-icon name="arrow-right" color="#CBCBCB" />
				</view>
			</view>
			<view class="info-item border">
				<view class="item-left">性别</view>
				<view class="item-right">
					<u-radio-group v-model="UserInfo.gender">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" label-size="22rpx"
							active-color="#01C3A8" @change="radioChange">
							{{ item.name == 1 ? '先生' : '女士'}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="info-item">
				<view class="item-left">年龄</view>
				<view class="item-right">
					<view class="int-box">
						<input type="text" v-model="UserInfo.age" maxlength="3">
						<text class="age">岁</text>
					</view>
					<u-icon name="edit-pen" color="#CBCBCB" />
				</view>
			</view>
		</view>
		<view class="btn" @click="getProfile">保存</view>
	</view>
</template>

<script>
	import { ResUserInfo, ResProfile, ResBinding, ResRemove } from '@/untils/api.js'
	export default {
		data() {
			return {
				UserInfo: {},
				radioList: [
					{ name: 1 },
					{ name: 0 }
				],
				wh: '',
				bankObj: {
					iv: '',
					code: '',
					encryptdata: ''
				}


			}
		},
		onLoad() {
			// 获取页面可操作高度
			let getWindowInfo = uni.getWindowInfo()
			this.wh = getWindowInfo.windowHeight
			this.getUserInfo()
		},
		methods: {
			async getRemove() {
				const { data: res } = await ResRemove()
				uni.$showMsg(res.msg)
				console.log(res, '解除绑定');
				this.getUserInfo()
			},
			getPhoneNumber(e) {
				this.bankObj.iv = e.detail.iv
				this.bankObj.encryptdata = e.detail.encryptedData
				if (e.detail.errMsg != 'getPhoneNumber:ok') return uni.$showMsg('授权失败！')
				uni.login({
					success: (res) => {
						this.bankObj.code = res.code
						this.getBinding()
					}
				})
			},

			async getBinding() {
				const { data: res } = await ResBinding(this.bankObj)
				uni.$showMsg(res.msg)
				this.getUserInfo()
			},
			// 头像上传
			async onChooseAvatar(e) {
				let images = e.detail.avatarUrl

				uni.uploadFile({
					url: 'https://cleaning.51meteor.com/api/common/upload',
					filePath: images,
					name: 'file',
					formData: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						let resdata = JSON.parse(res.data)
						this.UserInfo.avatar = resdata.data.fullurl
					}
				});
			},
			// 昵称输入事件
			changeinput(e) {
				this.UserInfo.username = e.detail.value
			},
			// 昵称失去焦点事件
			blurinput(e) {
				this.UserInfo.username = e.detail.value
			},
			// 单选
			radioChange(e) {
				console.log(e);
			},
			// 修改用户信息
			async getProfile() {
				let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				if (reg.test(this.UserInfo.mobile)) {
					let userObj = {
						username: this.UserInfo.username,
						mobile: this.UserInfo.mobile,
						file: this.UserInfo.avatar,
						gender: this.UserInfo.gender,
						age: this.UserInfo.age
					}
					const { data: res } = await ResProfile(userObj)
					if (res.code != 1) return uni.$showMsg(res.msg)
					uni.navigateBack()
				} else {
					uni.$showMsg('请输入正确的11位手机号码！')
				}
			},
			// 获取用户信息
			async getUserInfo() {
				const { data: res } = await ResUserInfo()
				if (res.code != 1) return uni.$showMsg(res.msg)
				this.UserInfo = res.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edit {
		background-color: #F7F7F7;
		overflow: hidden;

		.weui-input {
			padding-right: 10rpx;
		}

		.common {
			padding: 0 24rpx;
			box-sizing: border-box;
		}

		.info-list {
			background-color: #FFF;
			margin-top: 20rpx;

			.border {
				border-bottom: 1rpx solid #F2F2F2;
			}

			.info-item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item-left {
					font-size: 30rpx;
					font-weight: 600;
					color: #676767;
				}

				.item-right {
					display: flex;
					font-size: 30rpx;
					font-weight: 400;
					color: #000000;
					padding: 30rpx 0;
					text-align: right;



					.avatar-wrapper {
						margin-right: 10rpx;
						border-radius: 50%;
						padding: 0;
					}

					button.avatar-wrapper::after {
						border: none;
					}

					.userimg {
						width: 123rpx;
						height: 123rpx;
						display: block;
					}

					.opbtn {
						width: 200rpx;
						height: 40rpx;
						padding-right: 10rpx;
						text-align: right;
						line-height: 40rpx;
						font-size: 30rpx;
						background-color: #fff;
					}

					button.opbtn::after {
						border: none;
					}
				}
			}

		}

		.int-box {
			display: flex;
			align-items: center;

			.age {
				margin-right: 10rpx;
			}
		}

		.btn {
			width: 704rpx;
			text-align: center;
			height: 89rpx;
			line-height: 89rpx;
			background: #01C3A8;
			border-radius: 45rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #F1FFFE;
			margin: 200rpx auto;
		}
	}
</style>
